<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title>Person Annotation Example</title>
       <link rel="stylesheet" type="text/css" href="style.css"/>
       <script type="text/javascript" src="../src/PersonRef.js"></script>
       <script type="text/javascript" src="../src/invoke.js"></script>
    </head>
   <body vocab="http://schema.org/">
        <article>
            <h1>Using RDFa to Annotate Person References</h1><section>
                <h1>The Idea</h1>
                <p>A web page author makes reference to a person.  Rather than putting information about that person in a sidebar, they can make the reference popup information about the individual.</p>
            </section>
            <section>
                <h1>A Working Example</h1>
               <p>Click on the highlighted word to get more information.</p>
               <blockquote xmlns="http://www.w3.org/1999/xhtml">
                  Here is a reference to the <span typeof="Person/Ref" property="email" content="alex@milowski.com">author</span> of these services.
               </blockquote>
               <p>The information is stored locally in the document, could be hidden, and is keyed by e-mail.</p>
               <p>The actual annotation that would normally be hidden:</p>
               <div typeof="Person">
                  <span property="name">
                     <span property="givenName">Alex</span>
                     <span property="familyName">Milowski</span>
                  </span>
                  <span property="email">alex@milowski.com</span>
                  <span property="affiliation" typeof="Organization">
                     <span property="name">ILCC, School of Informatics,
                        University of Edinburgh</span>
                     <span property="url">
                        http://www.inf.ed.ac.uk/research/ilcc/</span>
                  </span>
                  <span property="url">http://www.milowski.com/</span>
                  <span property="webService" typeof="WebService">
                     <span property="url" content="http://twitter.com/"/>
                     <span property="name" content="Twitter"/>
                     <span property="alias" content="alexmilowski"/>
                  </span>
                  <span property="webService" typeof="WebService">
                     <span property="url" content="http://facebook.com/"/>
                     <span property="name" content="Facebook"/>
                     <span property="alias" content="alexmilowski"/>
                  </span>
                  <span property="webService" typeof="WebService">
                     <span property="url" content="http://linkedin.com/in/"/>
                     <span property="name" content="Linkedin"/>
                     <span property="alias" content="alexmilowski"/>
                  </span>
               </div>    
               <p>What the person reference annotation looks like:</p>
               <pre>
&lt;span typeof=&quot;Person/Ref&quot; property=&quot;email&quot; content=&quot;alex@milowski.com&quot;&gt;author&lt;/span&gt;
               </pre>
               <p>What the person annoation looks like:</p>
               <pre>
&lt;div typeof=&quot;Person&quot;&gt;
   &lt;span property=&quot;name&quot;&gt;
      &lt;span property=&quot;givenName&quot;&gt;Alex&lt;/span&gt;
      &lt;span property=&quot;familyName&quot;&gt;Milowski&lt;/span&gt;
   &lt;/span&gt;
   &lt;span property=&quot;email&quot;&gt;alex@milowski.com&lt;/span&gt;
   &lt;span property=&quot;affiliation&quot; typeof=&quot;Organization&quot;&gt;
      &lt;span property=&quot;name&quot;&gt;ILCC, School of Informatics,
         University of Edinburgh&lt;/span&gt;
      &lt;span property=&quot;url&quot;&gt;
         http://www.inf.ed.ac.uk/research/ilcc/&lt;/span&gt;
   &lt;/span&gt;
   &lt;span property=&quot;url&quot;&gt;http://www.milowski.com/&lt;/span&gt;
   &lt;span property=&quot;webService&quot; typeof=&quot;WebService&quot;&gt;
      &lt;span property=&quot;url&quot; content=&quot;http://twitter.com/&quot;/&gt;
      &lt;span property=&quot;name&quot; content=&quot;Twitter&quot;/&gt;
      &lt;span property=&quot;alias&quot; content=&quot;alexmilowski&quot;/&gt;
   &lt;/span&gt;
   &lt;span property=&quot;webService&quot; typeof=&quot;WebService&quot;&gt;
      &lt;span property=&quot;url&quot; content=&quot;http://facebook.com/&quot;/&gt;
      &lt;span property=&quot;name&quot; content=&quot;Facebook&quot;/&gt;
      &lt;span property=&quot;alias&quot; content=&quot;alexmilowski&quot;/&gt;
   &lt;/span&gt;
   &lt;span property=&quot;webService&quot; typeof=&quot;WebService&quot;&gt;
      &lt;span property=&quot;url&quot; content=&quot;http://linkedin.com/in/&quot;/&gt;
      &lt;span property=&quot;name&quot; content=&quot;Linkedin&quot;/&gt;
      &lt;span property=&quot;alias&quot; content=&quot;alexmilowski&quot;/&gt;
   &lt;/span&gt;
&lt;/div&gt;                      
               </pre>
            </section>
        </article>
    </body>
</html>
